$("#close").click(function () {
    $("dl").toggle("slow");
});

$(function () {
    $("dd").hide();  //把所有的dd元素隐藏
    $("dt").css("cursor", "pointer");
    $("dd").css("cursor", "pointer");

    $("#dt1").mouseover(function () {
        $("#dt1").css("color", "orange");
    });
    $("#dt2").mouseover(function () {
        $("#dt2").css("color", "orange");
    });
    $("#dt3").mouseover(function () {
        $("#dt3").css("color", "orange");
    });
    $("#dt4").mouseover(function () {
        $("#dt4").css("color", "orange");
    });

    $("#dt1").mouseout(function () {
        $("#dt1").css("color", "#fb8b2f");
    });
    $("#dt2").mouseout(function () {
        $("#dt2").css("color", "#fb8b2f");
    });
    $("#dt3").mouseout(function () {
        $("#dt3").css("color", "#fb8b2f");
    });
    $("#dt4").mouseout(function () {
        $("#dt4").css("color", "#fb8b2f");
    });

    $("#dl1").bind("click", function() {
        $("#dl1 dd").toggle("slow");   //点击后显示已隐藏的元素
        $("#dl1 dd").css("display", "block");
        $("#dl4>dd,#dl3>dd,#dl2>dd").hide(500);  //当点击下面的dl时，让上面的dd元素隐藏
    });
    $("#dl2").bind("click", function() {
        $("#dl2 dd").toggle("slow");   //点击后显示已隐藏的元素
        $("#dl2 dd").css("display", "block");
        $("#dl4>dd,#dl3>dd,#dl1>dd").hide(500);  //当点击下面的dl时，让上面的dd元素隐藏
    });
    $("#dl3").bind("click", function() {
        $("#dl3 dd").toggle("slow");   //点击后显示已隐藏的元素
        $("#dl3 dd").css("display", "block");
        $("#dl4>dd,#dl1>dd,#dl2>dd").hide(500);  //当点击下面的dl时，让上面的dd元素隐藏
    });
    $("#dl4").bind("click", function() {
        $("#dl4 dd").toggle("slow");   //点击后显示已隐藏的元素
        $("#dl4 dd").css("display", "block");
        $("#dl1>dd,#dl3>dd,#dl2>dd").hide(500);  //当点击下面的dl时，让上面的dd元素隐藏
    });
});

    